<template>
	<view class="container">
		<view class="info" @click="goToAddCoupon">
			<image class="add-img" src="/static/card-management/加号.png" mode=""></image>
			<span>新增卡卷</span>
		</view>

		<view class="info2">
			<view class="buttons">
				<view class="btn" :class="{active: currentTab === 'ongoing'}" @click="switchTab('ongoing')">
					进行中
				</view>
				<view class="btn" :class="{active: currentTab === 'finished'}" @click="switchTab('finished')">
					已结束
				</view>
			</view>
			<view class="coupon-list">
				<view class="coupon-card" :class="{expired: currentTab === 'finished'}" v-for="(coupon, index) in currentCoupons" :key="index">
					<view class="coupon-left">
						<view class="amount">¥{{coupon.amount}}</view>
						<view class="condition">满{{coupon.condition}}元可用</view>
					</view>
					<view class="coupon-right">
						<view class="coupon-name">{{coupon.name}}</view>
						<view class="validity">有效期：{{coupon.startDate}}-{{coupon.endDate}}</view>
						<view class="limit">{{coupon.limit}}</view>
						<image v-if="currentTab === 'finished'" class="finished-mark"
							src="/static/card-management/结束.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 'ongoing', // 当前选中的标签页
				ongoingCoupons: [{
						amount: 20,
						condition: 200,
						name: '卡卷名称:新用户专享体验卷',
						startDate: '2020.3.18',
						endDate: '2023.4.18',
						limit: '每人限领一张'
					},
					{
						amount: 20,
						condition: 200,
						name: '卡卷名称:新用户专享体验卷',
						startDate: '2020.3.18',
						endDate: '2023.4.18',
						limit: '每人限领一张'
					},
					{
						amount: 20,
						condition: 200,
						name: '卡卷名称:新用户专享体验卷',
						startDate: '2020.3.18',
						endDate: '2023.4.18',
						limit: '每人限领一张'
					}
				],
				finishedCoupons: [{
						amount: 20,
						condition: 200,
						name: '卡卷名称:新用户专享体验卷',
						startDate: '2020.3.18',
						endDate: '2020.4.18',
						limit: '每人限领一张'
					},
					{
						amount: 20,
						condition: 200,
						name: '卡卷名称:新用户专享体验卷',
						startDate: '2020.3.18',
						endDate: '2020.4.18',
						limit: '每人限领一张'
					}
				]
			}
		},
		computed: {
			currentCoupons() {
				return this.currentTab === 'ongoing' ? this.ongoingCoupons : this.finishedCoupons;
			}
		},
		methods: {
			switchTab(tab) {
				this.currentTab = tab;
			},
			goToAddCoupon() {
				uni.navigateTo({
					url: '/ssh/card-management/youhui-add'
				});
			}
		}
	}
</script>

<style>
	.container {
		background: linear-gradient(to bottom, #3284fc 50%, #f5f5f5 50%);
		height: 40vh;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
	}

	.info {
		margin-top: 30rpx;
		/* 水平居中关键样式 */
		margin-left: auto;
		margin-right: auto;
		background: #fff;
		border-radius: 50rpx;
		padding: 30rpx;
		width: 85%;
		height: 85rpx;
		box-sizing: border-box;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
		display: flex;
		align-items: center;
		justify-content: center;
		color: #1d73f1;
	}

	.info2 {
		margin-top: 30rpx;
		background: #fff;
		border-radius: 30rpx;
		padding: 30rpx;
		min-height: 500rpx;
		box-sizing: border-box;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	}

	.add-img {
		width: 40rpx;
		height: 40rpx;
	}

	span {
		font-size: 34rpx;
		font-weight: 400;
		margin-left: 20rpx;
	}

	/* 切换按钮样式 */
	.buttons {
		display: flex;
		background: #f5f5f5;
		border-radius: 50rpx;
		padding: 6rpx;
		margin-bottom: 30rpx;
		/* 水平居中关键样式 */
		margin-left: auto;
		margin-right: auto;
		width: 50%;
	}

	.btn {
		flex: 1;
		text-align: center;
		padding: 15rpx;
		border-radius: 50rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #999;
		transition: all 0.3s;
	}

	.btn.active {
		background: #3284fc;
		color: #fff;
	}

	/* 卡卷列表 */
	.coupon-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.coupon-card {
		display: flex;
		height: 250rpx;
		background: #fff;
		border-radius: 30rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		position: relative;
	}

	.coupon-card.expired {
		position: relative;
	}

	.coupon-card.expired::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.4);
		border-radius: 30rpx;
		z-index: 1;
	}

	.coupon-left {
		background: linear-gradient(135deg, #ff6b35, #ff8f65);
		width: 240rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #fff;
		position: relative;
	}

	.coupon-left::after {
		content: '';
		position: absolute;
		right: -10rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 20rpx;
		height: 20rpx;
		background: #ffffff;
		border-radius: 50%;
	}

	.amount {
		font-size: 60rpx;
		font-weight: bold;
		line-height: 1;
	}

	.condition {
		font-size: 24rpx;
		margin-top: 10rpx;
	}

	.coupon-right {
		flex: 1;
		padding:20rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.coupon-name {
		font-size: 30rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 30rpx;
	}

	.validity {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 30rpx;
	}

	.limit {
		font-size: 24rpx;
		color: #999;
	}

	.finished-mark {
		position: absolute;
		bottom: 20rpx;
		right: 20rpx;
		width: 150rpx;
		height: 75rpx;
		z-index: 2;
	}
</style>